<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务详情 - T-001</title> <!-- Dynamically set this in a real app -->

    <!-- Tailwind CSS via CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Font Awesome via Cloudflare CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <style>
        /* Optional: Add custom base styles or component overrides here if needed */
        body {
            font-family: 'Inter', sans-serif; /* Example using a common sans-serif font */
        }
        /* Add focus ring styles for better accessibility */
        a:focus, button:focus {
            outline: 2px solid transparent;
            outline-offset: 2px;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* Tailwind's blue-500 focus ring */
        }
        /* Style for status badges (reusing from list view) */
        .status-badge {
            @apply inline-block px-2.5 py-0.5 rounded-full text-xs font-semibold leading-tight;
        }
        .status-pending { @apply bg-yellow-100 text-yellow-800; }
        .status-inprogress { @apply bg-blue-100 text-blue-800; }
        .status-completed { @apply bg-green-100 text-green-800; }
        .status-cancelled { @apply bg-red-100 text-red-800; }

        /* Styles for Definition List (dl) used for details */
        dt { /* Term (Label) */
            @apply font-medium text-gray-600 flex items-center;
        }
        dd { /* Definition (Value) */
            @apply mt-1 text-gray-900 sm:mt-0 sm:col-span-2; /* Adjust col-span as needed */
        }
        .detail-grid {
             @apply grid grid-cols-1 sm:grid-cols-3 gap-x-4 gap-y-4; /* Grid layout for details */
        }

    </style>
    <!-- Consider adding a font like Inter from Google Fonts for better typography -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-gray-100 to-gray-200 min-h-screen flex flex-col">

    <!-- Header -->
    <header class="bg-white shadow-sm">
        <nav class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="text-xl font-bold text-gray-800">
                <i class="fas fa-clipboard-list mr-2 text-blue-600"></i>任务管理器
            </div>
            <div>
                <!-- Navigation links -->
                <a href="list-tasks.html" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">查看任务</a>
                <a href="index.html" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">创建任务</a>
                <a href="#" class="text-blue-600 hover:bg-blue-100 px-3 py-2 rounded-md text-sm font-medium border border-blue-600">登录</a>
            </div>
        </nav>
    </header>

    <!-- Main Content Area -->
    <main class="flex-grow container mx-auto px-4 py-8 md:py-12">
        <div class="max-w-3xl mx-auto bg-white p-6 md:p-8 rounded-xl shadow-lg">

            <!-- Task Header -->
            <div class="border-b border-gray-200 pb-4 mb-6">
                <div class="flex justify-between items-start gap-4">
                    <div>
                        <h1 class="text-2xl md:text-3xl font-bold text-gray-800 leading-tight">
                            <i class="fas fa-clipboard-check mr-2 text-blue-500"></i>
                            完成项目初步设计 <!-- Sample Task Title -->
                        </h1>
                        <p class="text-sm text-gray-500 mt-1">
                            任务 ID: <span class="font-mono font-medium text-gray-700">T-001</span> <!-- Sample Task ID -->
                        </p>
                    </div>
                    <span class="status-badge status-inprogress flex-shrink-0 mt-1">进行中</span> <!-- Sample Status -->
                </div>
            </div>

            <!-- Task Details Section -->
            <div class="space-y-6">

                <!-- Description -->
                <div>
                    <h2 class="text-lg font-semibold text-gray-700 mb-2">
                        <i class="fas fa-align-left mr-2 text-gray-500"></i>任务描述
                    </h2>
                    <p class="text-gray-700 leading-relaxed bg-gray-50 p-4 rounded-md border border-gray-200">
                        这是任务的详细描述。需要根据客户的需求文档，完成项目核心功能的初步界面设计和交互流程图。确保设计风格与公司品牌指南一致。包含线框图和主要页面的高保真原型。
                        <!-- Sample Description -->
                    </p>
                </div>

                <!-- Metadata using Definition List -->
                <div>
                     <h2 class="text-lg font-semibold text-gray-700 mb-3">
                        <i class="fas fa-info-circle mr-2 text-gray-500"></i>详细信息
                    </h2>
                    <dl class="detail-grid border-t border-gray-200 pt-4">
                        <!-- Priority -->
                        <div class="sm:col-span-1">
                            <dt><i class="fas fa-flag mr-2 w-4 text-center text-red-500"></i>优先级</dt>
                            <dd class="text-red-600 font-medium">高</dd> <!-- Sample Priority -->
                        </div>

                        <!-- Due Date -->
                        <div class="sm:col-span-1">
                            <dt><i class="far fa-calendar-alt mr-2 w-4 text-center text-orange-500"></i>截止日期</dt>
                            <dd>2023-11-15</dd> <!-- Sample Due Date -->
                        </div>

                         <!-- Assigned To -->
                        <div class="sm:col-span-1">
                            <dt><i class="far fa-user mr-2 w-4 text-center text-purple-500"></i>负责人</dt>
                            <dd>张三</dd> <!-- Sample Assignee -->
                        </div>

                        <!-- Creation Date -->
                        <div class="sm:col-span-1">
                            <dt><i class="far fa-calendar-plus mr-2 w-4 text-center text-green-500"></i>创建时间</dt>
                            <dd>2023-10-26 09:30</dd> <!-- Sample Creation Time -->
                        </div>

                        <!-- Last Updated -->
                        <div class="sm:col-span-2">
                            <dt><i class="far fa-clock mr-2 w-4 text-center text-blue-500"></i>最后更新</dt>
                            <dd>2023-10-28 14:15</dd> <!-- Sample Update Time -->
                        </div>
                    </dl>
                </div>

                 <!-- Optional: Attachments Section -->
                 <div>
                     <h2 class="text-lg font-semibold text-gray-700 mb-2">
                        <i class="fas fa-paperclip mr-2 text-gray-500"></i>附件
                    </h2>
                    <ul class="list-disc list-inside space-y-1 pl-2 text-sm">
                        <li><a href="#" class="text-blue-600 hover:underline">需求文档_v1.2.pdf</a> <span class="text-gray-500 text-xs">(1.5 MB)</span></li>
                        <li><a href="#" class="text-blue-600 hover:underline">品牌指南.pdf</a> <span class="text-gray-500 text-xs">(800 KB)</span></li>
                        <!-- Add more attachments as needed -->
                    </ul>
                     <p class="text-xs text-gray-500 mt-2 italic">（此处为附件占位符）</p>
                 </div>

                 <!-- Optional: Comments/Activity Log Section -->
                 <div>
                     <h2 class="text-lg font-semibold text-gray-700 mb-2">
                        <i class="far fa-comments mr-2 text-gray-500"></i>评论/活动
                    </h2>
                     <div class="border border-gray-200 rounded-md p-4 space-y-3 bg-gray-50 max-h-48 overflow-y-auto">
                         <p class="text-sm text-gray-600"><span class="font-medium text-gray-800">李四</span> <span class="text-gray-400 text-xs"> (2023-10-27 10:00):</span> 初稿看起来不错，请注意按钮的圆角需要调整。</p>
                         <p class="text-sm text-gray-600"><span class="font-medium text-gray-800">系统</span> <span class="text-gray-400 text-xs"> (2023-10-28 14:15):</span> 任务状态已更新为 "进行中"。</p>
                         <!-- Add more comments/activities -->
                     </div>
                     <p class="text-xs text-gray-500 mt-2 italic">（此处为评论/活动日志占位符）</p>
                 </div>

            </div>

            <!-- Action Buttons -->
            <div class="mt-8 pt-6 border-t border-gray-200 flex flex-col sm:flex-row justify-between items-center gap-4">
                <a href="list-tasks.html" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 w-full sm:w-auto justify-center">
                    <i class="fas fa-arrow-left mr-2"></i>返回列表
                </a>
                <div class="flex space-x-3 w-full sm:w-auto">
                    <button type="button" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-yellow-500 hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-400 flex-grow sm:flex-grow-0">
                        <i class="fas fa-pencil-alt mr-2"></i>编辑任务
                    </button>
                    <button type="button" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 flex-grow sm:flex-grow-0">
                        <i class="fas fa-trash-alt mr-2"></i>删除任务
                    </button>
                </div>
            </div>

        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-white mt-12 py-4 border-t border-gray-200">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            &copy; 2023 任务管理系统. 保留所有权利.
        </div>
    </footer>

    <!-- No specific JS needed for this static prototype, but you could add interactions later (e.g., confirm delete) -->
    <script>
        console.log("任务详情页面加载完成。");
        // Potential JS: Add confirmation dialog for delete button
        // const deleteButton = document.querySelector('button.bg-red-600');
        // if (deleteButton) {
        //     deleteButton.addEventListener('click', function() {
        //         if (confirm('确定要删除这个任务吗？此操作无法撤销。')) {
        //             console.log('模拟删除任务 T-001');
        //             // Add actual delete logic here (e.g., API call)
        //             // Redirect or update UI after deletion
        //             window.location.href = 'list-tasks.html'; // Example redirect
        //         }
        //     });
        // }
    </script>

</body>
</html>
